<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('数据大屏')" />
</head>
<body class="gray-bg">
  	<div style="width:400px;height:200px;position:absolution;top:0px;left:0px;" id="topLeft"></div>
  	<div style="width:400px;height:200px;position:absolution;top:20px;right:0px;" id="topRight"></div>
  	<div style="width:400px;height:200px;position:absolution;top:50px;right:-10px;" id="topWww"></div>
  	<div style="width:400px;height:200px;position:absolution;top:90px;right:-10px;" id="topZzz"></div>
  	<div style="width:400px;height:200px;position:absolution;top:-800px;left:400px;" id="topQqq"></div>
  	<div style="width:200px;height:150px;position:absolution;top:-800px;left:400px;" id="topAaa"></div>
  	<div style="width:400px;height:250px;position:absolution;top:-1000px;left:800px;" id="topBbb"></div>
  	  	<div style="width:400px;height:250px;position:absolution;top:-1000px;left:800px;" id="topCcc"></div>
  	  	  	  	<div style="width:400px;height:250px;position:absolution;top:-1000px;left:800px;" id="topDdd"></div>
  	  	
  	
    <th:block th:include="include :: footer" />
     <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script th:inline="javascript">
		// 使用刚指定的配置项和数据显示图表。
        
        function drawOne(){
        	// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('topLeft'));
	 
	 		var xdata=[];
	 		var sdata=[];
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '           各类企业数量'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {
	                data: xdata,
	                axisLabel:{
	                  interval:0,
	                  rotate:45,//倾斜度 -90 至 90 默认为0
	 
	                }
	            },
	            yAxis: {},
	            series: [{
	                name: '数量',
	                type: 'bar',
	                data: sdata
	            }]
	        };
	        var url=ctx + "system/company/typecount"
        	$.post(url,{},function(data){
        		for(var i=0;i<data.length;i++){
        			var item=data[i];
        			xdata.push(item.name);
        			sdata.push(item.num);
        		}
        		 myChart.setOption(option);
        		 console.log(data);
	        	})
	        }
        
                function drawTwo(){
        	// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('topRight'));
	 
	 		var xdata=[];
	 		var sdata=[];
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '   不同标签企业数量'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {
	                data: xdata,
	                axisLabel:{
	                  interval:0,
	                  rotate:45,//倾斜度 -90 至 90 默认为0
	 
	                }
	            },
	            yAxis: {},
	            series: [{
	                name: '数量',
	                type: 'bar',
	                data: sdata
	            }]
	        };
	        var url=ctx + "system/company/tabcount"
        	$.post(url,{},function(data){
        		for(var i=0;i<data.length;i++){
        		var item=data[i];
        			xdata.push(item.name);
        			sdata.push(item.num);
        		}
        		 myChart.setOption(option);
        		console.log(data);
        	})
        }
        
        function drawThree(){
        	// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('topWww'));
	 
	 		var xdata=[];
	 		var sdata=[];
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '   员工标签及数量'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {
	                data: xdata,
	                axisLabel:{
	                  interval:0,
	                  rotate:45,//倾斜度 -90 至 90 默认为0
	 
	                }
	            },
	            yAxis: {},
	            series: [{
	                name: '数量',
	                type: 'bar',
	                data: sdata
	            }]
	        };
	        var url=ctx+"system/employee/tabscount"
        	$.post(url,{},function(data){
        		for(var i=0;i<data.length;i++){
        		var item=data[i];
        			xdata.push(item.name);
        			sdata.push(item.num);
        		}
        		 myChart.setOption(option);
        		console.log(data);
        	})
        }
             function drawFour(){
        	// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('topZzz'));
	 
	 		var xdata=[];
	 		var sdata=[];
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '     企业所获资助'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {
	                data: xdata,
	                axisLabel:{
	                  interval:0,
	                  rotate:45,//倾斜度 -90 至 90 默认为0
	 
	                }
	            },
	            yAxis: {},
	            series: [{
	                name: '数量',
	                type: 'bar',
	                data: sdata
	            }]
	        };
	        var url=ctx + "system/grant/moneycount"
        	$.post(url,{},function(data){
        		for(var i=0;i<data.length;i++){
        		var item=data[i];
        			xdata.push(item.get_time);
        			sdata.push(item.money);
        		}
        		 myChart.setOption(option);
        		console.log(4,data);
        	})
        }
        
             function drawFive(){
        	// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('topQqq'));
	 
	 		var xdata=[];
	 		var sdata=[];
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '  企业知识产权数量'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {
	                data: xdata,
	                axisLabel:{
	                  interval:0,
	                  rotate:45,//倾斜度 -90 至 90 默认为0
	 
	                }
	            },
	            yAxis: {},
	            series: [{
	                name: '数量',
	                type: 'bar',
	                data: sdata
	            }]
	        };
	        var url=ctx + "system/property/propertypecount"
        	$.post(url,{},function(data){
        		for(var i=0;i<data.length;i++){
        		var item=data[i];
        			xdata.push(item.get_time);
        			sdata.push(item.name);
        		}
        		 myChart.setOption(option);
        		console.log(5,data);
        	})
        }
                
             function drawSix(){
        	// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('topAaa'));
	 
	 		var xdata=[];
	 		var sdata=[];
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '   各知识产权数量'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {
	                data: xdata,
	                axisLabel:{
	                  interval:0,
	                  rotate:45,//倾斜度 -90 至 90 默认为0
	 
	                }
	            },
	            yAxis: {},
	            series: [{
	                name: '数量',
	                type: 'bar',
	                data: sdata
	            }]
	        };
	        var url=ctx + "system/property/iprotypecount"
        	$.post(url,{},function(data){
        		for(var i=0;i<data.length;i++){
        		var item=data[i];
        			xdata.push(item.name);
        			sdata.push(item.num);
        		}
        		 myChart.setOption(option);
        		console.log(6,data);
        	})
        }
             
             function drawSeven(){
             	// 基于准备好的dom，初始化echarts实例
     	        var myChart = echarts.init(document.getElementById('topCcc'));
     	 
     	 		var xdata=[];
     	 		var sdata=[];
     	        // 指定图表的配置项和数据
     	        var option = {
     	            title: {
     	                text: '   各知识产权数量'
     	            },
     	            tooltip: {},
     	            legend: {
     	                data:['数量']
     	            },
     	            xAxis: {
     	                data: xdata,
     	                axisLabel:{
     	                  interval:0,
     	                  rotate:45,//倾斜度 -90 至 90 默认为0
     	 
     	                }
     	            },
     	            yAxis: {},
     	            series: [{
     	                name: '数量',
     	                type: 'bar',
     	                data: sdata
     	            }]
     	        };
     	        var url=ctx + "system/product/namelist"
             	$.post(url,{},function(data){
             		for(var i=0;i<data.length;i++){
             		var item=data[i];
             			xdata.push(item.comp_name);
             			sdata.push(item.prod_name);
             		}
             		 myChart.setOption(option);
             		console.log(7,data);
             	})
             }
             
             function drawEight(){
              	// 基于准备好的dom，初始化echarts实例
      	        var myChart = echarts.init(document.getElementById('topDdd'));
      	 
      	 		var xdata=[];
      	 		var sdata=[];
      	        // 指定图表的配置项和数据
      	        var option = {
      	            title: {
      	                text: '   各知识产权数量'
      	            },
      	            tooltip: {},
      	            legend: {
      	                data:['数量']
      	            },
      	            xAxis: {
      	                data: xdata,
      	                axisLabel:{
      	                  interval:0,
      	                  rotate:45,//倾斜度 -90 至 90 默认为0
      	 
      	                }
      	            },
      	            yAxis: {},
      	            series: [{
      	                name: '数量',
      	                type: 'bar',
      	                data: sdata
      	            }]
      	        };
      	        var url=ctx + "system/honour/comphonour"
              	$.post(url,{},function(data){
              		for(var i=0;i<data.length;i++){
              		var item=data[i];
              			xdata.push(item.comp_name);
              			sdata.push(item.prod_name);
              		}
              		 myChart.setOption(option);
              		console.log(7,data);
              	})
              }

        
        $(function(){
        	drawOne();
        	drawTwo();
        	drawThree();
        	drawFour();
        	drawFive();
        	drawSix();
        	drawSeven();
        	drawEight();
        })
    </script>
</body>
</html>